<template>
  <div class="showBox">
      <div class="head">
          <el-button size="mini" type="primary" round icon="el-icon-plus" @click="addItem">添加</el-button>
      </div>

      <div class="table">
          <el-table :data="tableData" height="100%" v-loading="loadings">
              <el-table-column type="index" label="序号" align="center"></el-table-column>
              <el-table-column prop="itemCode" label="项目编号" align="center"></el-table-column>
              <el-table-column prop="itemName" label="项目名称" align="center"></el-table-column>
              <el-table-column prop="checkBuss" label="关联业务逻辑" align="center"></el-table-column>
              <el-table-column prop="isuse" label="是否启用" align="center">
                  <template slot-scope="scope">
                      {{scope.row.isuse?'是':'否'}}
                  </template>
              </el-table-column>

              <el-table-column label="操作" width="150" align="center">
                  <template slot-scope="scope">
                      <el-button  size="mini" type="primary" round @click="change(scope.row)">修改</el-button>
                      <el-button  size="mini" type="danger" round @click="del(scope.row)">删除</el-button>
                  </template>
              </el-table-column>
          </el-table>
      </div>

       <div class="paging">
          <el-pagination
            @size-change="SizeChange"
            @current-change="CurrentChange"
            :page-sizes="[10, 20, 30, 50, 100]"
            :current-page="1"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
          >

          </el-pagination>
      </div>

    <el-dialog
      title="新增检查维护项"
      :visible.sync="isAdd"
      width="30%"
      >
      <div>
        <el-form class="smartShopDialogForm" :model="addItemObj" label-position="right" label-width="90px">
          <el-form-item  label="项目类型编号">
            <el-input size="small" v-model="addItemObj.itemCode"></el-input>
          </el-form-item>

          <el-form-item label="项目类型名称">
            <el-input size="small" v-model="addItemObj.itemName"></el-input>
          </el-form-item>

          <el-form-item label="关联业务逻辑">
            <el-select v-model="addItemObj.checkBuss" style="width: 100%">
              <el-option v-for="(item,index) in logicOption" :key="index" :label="item" :value="item"></el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="是否启用" >
            <el-checkbox label="启用" v-model="addItemObj.isuse" ></el-checkbox>
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="isAdd=false" round size="mini">取 消</el-button>
        <el-button type="primary" round @click="add" size="mini">确 定</el-button>
      </span>
    </el-dialog>

    <el-dialog
      title="编辑检查维护项"
      :visible.sync="isChange"
      width="30%"
    >
      <div class="dialogForm">
        <el-form class="smartShopDialogForm" :model="changeObj" label-position="right" label-width="90px">
          <el-form-item label="项目类型编号">
            <el-input size="small" v-model="changeObj.itemCode" disabled></el-input>
          </el-form-item>

          <el-form-item label="项目类型名称">
            <el-input size="small" v-model="changeObj.itemName"></el-input>
          </el-form-item>

          <el-form-item label="关联业务逻辑">
            <el-select v-model="changeObj.checkBuss">
              <el-option v-for="(item,index) in logicOption" :key="index" :label="item" :value="item"></el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="是否启用" >
            <el-checkbox label="启用" v-model="changeObj.isuse" :checked="changeObj.isuse"></el-checkbox>
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="isChange=false" round size="mini">取 消</el-button>
        <el-button type="primary" round @click="edit" size="mini">确 定</el-button>
      </span>
    </el-dialog>
    </div>
</template>

<script>
  import {getCheckItem, addCheckItem , getBussTypeList, deleteCheckItem, changeCheckItem} from '@/api/smartShops'
export default {
  components: {},
  props: {},
  data() {
    return {
      loadings: false,
      tableData:[],
      pageSize:10,
      total:0,
      currentPage:1,
      isAdd:false,
      isChange:false,
      addItemObj:{
        checkBuss: '',
        itemName: '',
        isuse: '',
        itemCode: ''
      },
      logicOption:[],
      changeObj:{
        checkBuss: '',
        itemName: '',
        isuse: '',
        itemCode: ''
      }
    };
  },
  watch: {},
  computed: {},
  methods: {
      SizeChange(size){
        this.pageSize=size;
        this.getData();
      },
      CurrentChange(current){
        this.currentPage=current;
        this.getData()
      },
      change(row){
        this.isChange=true;
        row.isOn=!!row.isOn;
        this.changeObj={...row};
      },
     async edit(){
        let data = await changeCheckItem({
          itemCode: this.changeObj.itemCode,
          itemName:  this.changeObj.itemName,
          isuse:  this.changeObj.isuse ? 1 : 0,
          checkBuss:  this.changeObj.checkBuss,
          itemUuid:  this.changeObj.itemUuid,
        });
       this.isChange=false;
       if (data.code) {
          this.$message.success('修改成功');
          this.getData()
          return
        }
       this.$message.error(data.message)
      },
     addItem(){
      this.addItemObj = {
           checkBuss: '',
           itemName: '',
           isuse:  '',
           itemCode: ''
       };
        this.isAdd=true;
     },
    async add(){
        let postData = {
          itemCode: this.addItemObj.itemCode,
          itemName:  this.addItemObj.itemName,
          isuse:  this.addItemObj.isuse ? 1 : 0,
          checkBuss:  this.addItemObj.checkBuss
        }
       let data = await addCheckItem(postData);
      this.isAdd=false;
      if(data.code){
         this.$message.success('添加成功');
        this.getData()
         return
       }
      this.$message.error(data.message);
    },
     del(row){
      this.$confirm('确定删除这条记录吗?', '删除提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        roundButton: true,
        type: 'warning'
      }).then(async () => {
        let {code,result} = await deleteCheckItem({
          itemUuid: row.itemUuid
        });
        if(code === 1){
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
          this.getData();
          return
        }
        this.$message({
          type: 'error',
          message: '删除失败!'
        });
      })
    },
    //关联业务逻辑
    async getBussTypeList() {
      let {result} = await getBussTypeList();
      if(result){
        this.logicOption = result
      }
    },
    async getData(){
      this.loadings = true
        let data = await getCheckItem({
          size:this.pageSize,
          current:this.currentPage
        });
      this.loadings = false;
      if(data.code){
          this.tableData = data.records;
          this.total = data.total;
          return
        }
        this.$message.error(data.message)
        this.tableData = [];
        this.total = 0
    }
  },
  created() {
    this.getData();
  },
  mounted() {
    this.getBussTypeList();
  }
};
</script>
<style lang="scss" scoped>
.showBox{
    width: 100%;
    height: 100%;
    box-sizing: border-box;

    .head{
        height: 50px;
        width: 100%;
        padding: 0 10px;
        line-height: 40px;
        border-bottom: 1px solid #DCDFE6;
    }

    .table{
        height: calc(100% - 90px);
        width: 100%;
    }

    .paging{
        height: 40px;
    }

}
</style>
